<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>移动列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/study.css" />
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<style type="text/css" media="screen">
			.right_img {
				height: 20px;
				line-height: 20px;
				padding-left: 20px;
				background: url(../../icon/right_img.png) no-repeat 0px 0px;
				background-size: 20px 20px;
			}
			.next_btn {
				width: 92%;
				height: 67%;
				font-size: 16px;
				background: url(../../icon/add_research.png) no-repeat 36% 50%;
				background-size: 20px 20px;
				background-color: #18b4ed;
			}
			.mui-btn-warning, .mui-btn-yellow {
				color: #fff;
				border: 1px solid #18b4ed;
			}
			.mui-btn-warning:enabled:active {
				color: #fff;
				border: 1px solid #18b4ed;
				background-color: #18b4ed;
			}
			.nav-item:active {
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="base_style_color" id='BarAppearance' style="height: 22px;width: 100%; position:fixed; left: 0px;top:0px;z-index: 998" ></div>
		<div class="base_navigation_bar base_style_color base_navigation_item_bar" style="position: fixed;left: 0px;top: 20px;">
			<div class="base_navigation_bar base_style_color base_navigation_item_bar" >
				<a class="base_left_item nav-item" href="#" > <img class="base_back_icon" src="../../image/icon_jiantou.png" alt="" onclick="submit()"> </a>
				<span id="title">调整顺序</span>
				<!--<a class="base_right_item nav-item" href="#" onclick="submit()"> 完成 </a>-->
			</div>
		</div>
		<div id="app" style="margin-top: 64px;">
			<div class="container">
				<ul id="foo" class="block__list block__list_words mui-table-view">
					<!--<li class="mui-table-view-cell mui-media list_s " >
					<div href="javascript:;" class="">
					<span>Q1:(单选)您最喜欢啥素菜</span>
					<span class="right_img right"></span>
					</div>
					</li>
					<li class="mui-table-view-cell mui-media list_s" >
					<div href="javascript:;" class="">
					<span>Q2:(单选)您最喜欢啥水果</span>
					<span class="right_img right"></span>
					</div>
					</li>
					<li class="mui-table-view-cell mui-media list_s" >
					<div href="javascript:;" class="">
					<span>Q3:(单选)您最喜欢啥球类</span>
					<span class="right_img right"></span>
					</div>
					</li>
					<li class="mui-table-view-cell mui-media list_s" >
					<div href="javascript:;" class="">
					<span>Q4:(单选)您最喜欢啥饮料</span>
					<span class="right_img right"></span>
					</div>
					</li>
					<li class="mui-table-view-cell mui-media list_s" >
					<div href="javascript:;" class="">
					<span>Q5:(单选)您最喜欢啥菜</span>
					<span class="right_img right"></span>
					</div>
					</li>-->
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/Sortable.js"></script>
	<script>
		var queArr = new Array();
		var IndexArr = new Array();
		var questionArr = ''
		var questionArr3 = new Array();
		apiready = function() {
			questionArr = api.pageParam.data;
			CreatSortable();
			setUI(questionArr);
			
		};
		function setUI(data) {
			for (var i = 0; i < data.length; i++) {
//								alert(JSON.stringify(data[i]))
				var questionStr = "Q" + (i + 1) + ":" + "(" + data[i].subsecttitle + ")" + data[i].titile;
				$('#foo').append('<li class="mui-table-view-cell mui-media list_s" arr=' + (i) + '>' + '<div href="javascript:;" class="">' + '<span>' + questionStr + '</span>' + '<span class="right_img right"></span>' + '</div>' + '</li>')
			}
		}

		function CreatSortable() {
			Sortable.create(foo, {
				group : "words",
				animation : 150,
				store : {
					get : function(sortable) {
						var order = localStorage.getItem(sortable.options.group);
						return order ? order.split('|') : [];
					},
					set : function(sortable) {
						var order = sortable.toArray();
						localStorage.setItem(sortable.options.group, order.join('|'));
					}
				},
				chosenClass : "mui-active", //
				onEnd : function(evt) {
					var usernameEle = $("#foo");
					usernameEle.children('li').each(function(i, n) {
						var obj = $(n);
						var index = obj.attr('arr');
						questionArr3[i] = questionArr[index];
					});
//					alert(JSON.stringify(questionArr3))
					$("#foo").html('');
					setUI(questionArr3);
				}
			});
		};
		function submit() {
			var questionArr2 = new Array();
			if (questionArr3 == '' || questionArr3.length == 0) {
				questionArr2 = questionArr
			} else {
				questionArr2 = questionArr3
			}
			if (api.pageParam.openType == 15) {
				api.openWin({useWKWebView:true,
					name : 'Teacher_EditResearchListDetailWin',
					url : 'Teacher_EditResearchListDetailWin.html',
					pageParam : {
						data : questionArr2,
						type1 : 7,
						classarr : api.pageParam.classarr,
						pid : api.pageParam.pid,
				       cid : api.pageParam.cid,
				       sourceurl : api.pageParam.sourceurl,
					sourcetitle : api.pageParam.sourcetitle
					},
					slidBackEnabled : false,
					reload : true
				});
			} else if (api.pageParam.openType == 16) {
				api.openWin({useWKWebView:true,
					name : 'Teacher_AddResearchDetailWindow',
					url : 'Teacher_AddResearchDetailWindow.html',
					pageParam : {
						data : questionArr2,
						type1 : 7,
						classarr : api.pageParam.classarr,
						pid : api.pageParam.pid,
				cid : api.pageParam.cid,
				sourceurl : api.pageParam.sourceurl,
					sourcetitle : api.pageParam.sourcetitle
					},
					slidBackEnabled : false,
					reload : true
				});
			}
		}
	</script>
</html>